<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript_DOM</title>
    <style>
        .aColor {
            color: red;
        }
    </style>
</head>

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username" />
    <p>=======================</p>
    <select id="select">
        <option>--------请选择--------</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
    <p>=======================</p>
    <a>点我呀</a>
    <p>=======================</p>
    <div id="div"></div>
</body>
<script>
    //使用getElementById()获取元素对象
    let div1 = document.getElementById("div1");
    // alert(div1);
    //获取父元素

    //getElementsByClassName() 获取对应class名的元素对象 返回为数组 可能不止一个
    let div2 = document.getElementsByClassName("cls");
    // alert(div2);

    // getElementsByTagName() 获取对应标签名的元素对象合集
    let div3 = document.getElementsByTagName("div");
    // alert(div3);

    //getElementsByName() 获取对应名称的元素对象合集
    let div4 = document.getElementsByName("username");
    div4[0].value = "Hello";  //设置value值
    // alert(div4);

    //parentElement 获取父标签
    let body = div1.parentElement;
    // alert(body);

    /*
        元素的操作
    */
    //createElement(元素标签) 创建元素  
    let option = document.createElement("option");
    option.innerText = "深圳";

    //appendChild(元素)  添加元素 
    let select = document.getElementById("select");
    select.appendChild(option);

    //移除元素 removeChild(元素)
    // select.removeChild(option);

    //替换元素 replaceChild(替换元素, 被替换元素) 
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2, option);

    /*
        属性操作
    */
    //添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href", "http://www.baidu.com/");
    // alert(a.getAttribute("href")); //获取属性

    //删除属性
    // a.removeAttribute("href");

    //添加样式
    // a.style.color = "red";

    //添加指定属性
    a.className="aColor";

    /*
        文本操作
    */
    let div = document.getElementById("div");
    div.innerText="我是div";    //直接设置内容 不解析标签

    div.innerHTML="<b>我是div</b>"   //解析标签

</script>

</html>